<template>
	<view style="height: 100%;">
		<view :class="class_bg" :style="{backgroundImage: 'url(' + imageURL + ')',height:warpHeight+'px'}">
			<!-- 女职工保健显示，暂时 -->
			<view v-if="title=='2023年女职工保健卡'" style="height: 100%;">
				<view class=" gui-flex gui-rows gui-justify-content-center gui-margin-top ">
					<canvas canvas-id="canvas" id="canvas" style="width:340rpx; height:340rpx;"
						@longpress="saveQrcode"></canvas>
				</view>
				<view v-if="qrcode_showtext && whatF == 1" class="text-center mt10"
					style="text-align: center; margin-top: 20rpx; margin-bottom: 10rpx;">
					{{qrcodeContent}}
				</view>
				<view style="text-align: center;">
					<text class="gui-h4 " style="color: #ea68a2;font-size: 30rpx;">
						余额：{{balance}}
					</text>
				</view>
				<view v-if="title=='2023年女职工保健卡'" style="display: flex;justify-content: center;">
					<button type="default" class="gui-button gui-border-radius-large gui-color-white "
						style="width: 45%; background-color: #2e82ff;" @tap="getdata(c_id)">刷新二维码</button>
				</view>
			</view>

			<view class="mianScrollView  gui-border-box" :style="{height:mainBodyHeight+'px',}"
				v-if="title!='2023年女职工保健卡'" id="main_view">
				<view style="height: 10%;"></view>
				<view style="height:auto;font-size: 50rpx;font-weight: bold;display: flex;
					justify-content: center;margin-top: 30rpx;">
					<text>{{title}}</text>
				</view>
				<view style="height:340rpx;padding: 40rpx 10rpx 10rpx 10rpx;">
					<view class=" gui-flex gui-rows gui-justify-content-center" v-if="title == '2025年工会会员五一节日慰问自提券'">
						<canvas v-if="whether == 1" canvas-id="canvas" id="canvas" style="width:340rpx; height:340rpx;"
							@longpress="saveQrcode"></canvas>
						<view v-else class="">
							<image style="position: relative; width: 320rpx; height: 320rpx;" src="../../static/wu.png"
								alt=""></image>
							<view style="position: absolute; font-size: 35rpx; font-weight: bold; display: flex;
							 justify-content: center; color: red;margin-top: -200rpx;margin-left: -150rpx; margin-right: 50rpx;">
								使用时间为：2025年4月27日—2025年6月30日
							</view>
						</view>
					</view>
					<view v-else class="gui-flex gui-rows gui-justify-content-center">
						<canvas canvas-id="canvas" id="canvas" style="width:340rpx; height:340rpx;"
							@longpress="saveQrcode"></canvas>
					</view>
				</view>

				<view v-if="qrcode_showtext == true && whatF == 1" class="text-center mt10" style="text-align: center;">
					{{qrcodeContent}}
				</view>

				<view
					style="height: 10%; font-size: 45rpx; font-weight: bold; display: flex; justify-content: center; align-items: center;">
					<text>余额：{{balance}}</text>
				</view>
				<!-- , top:mainBodyTop+'rpx' -->
				<view style="height: auto; text-align: center; font-size: 30rpx;">
					<text v-if="start_time == null && expiry_time == null">使用期限：长期</text>
					<text v-if="start_time == null && expiry_time != null">使用期限至：{{expiry_time}}</text>
					<text v-if="start_time != null && expiry_time == null">使用期限：{{start_time}} ~ 待定...</text>
					<view v-if="start_time != null && expiry_time != null">
						<view style="text-align: center; font-size: 32rpx;">使用期限：</view>
						<view>{{start_time}} ~ {{expiry_time}}</view>
					</view>
					<!-- <text>使用期限：{{expiry_time!=null?expiry_time.split(' ')[0]:'长期'}}</text> -->
				</view>
				<view class="demo">
					<button class="button3" @tap="getdata(c_id)">
						<text class="gui-button-text">刷新二维码</text>
					</button>
				</view>
				<!-- <view class="demo" @tap="amend_sign">
					<button>修改签名</button>
				</view> -->
				<view style="position: absolute; bottom: 10rpx;" class="box">
					<img src="static/lg_log.png" alt=""
						style='width: 350rpx;height: 100rpx;right: 20rpx;position: absolute;'>
				</view>
			</view>
		</view>
		<gui-page-loading ref="guipageloading">
			<!-- 可以通过插槽添加自定义内容，如 加载提示文本 -->
			<text class="gui-block-text gui-text-small gui-text-center gui-color-gray gui-italic"
				style="padding-top:10rpx;">loading</text>
		</gui-page-loading>
	</view>
</template>
<script>
	import QRCode from '@/Grace6/js/qrcode.js';
	export default {
		data() {
			return {
				// 主体区域 top 值单位 px
				mainBodyTop: 450,
				// 底部图层高度 [ 系统会自动运算 ]
				mainBodyHeight: 800,
				pageLoading: true,
				input_money: false,
				class_bg: 'q_bg',
				// 二维码绘制对象
				title: '',
				money: 0,
				qrcode: null,
				// 二维码尺寸，单位 rpx
				qrcodeSize: 340,
				// 二维码数据
				qrcodeContent: 'https://www.graceui.com',
				// 二维码背景颜色
				qrcodeBgColor: '#FFFFFF',
				// 二维码颜色
				qrcodeColor: '#008AFF',
				qrcode_showtext: false,
				// 画布 id
				qrcodeId: 'canvas',
				balance: 0,
				is_cache: false,
				c_id: null,
				ns_if: false,
				start_time: null,
				expiry_time: null,
				imageURL: null,
				warpHeight: 1000,
				wallet_type: '',
				// 二维码字符串开头是否为“F”，1为是，0不是
				whatF: null,
				user: uni.getStorageSync('member'),
				whether: null,
				card_id: null,
			}
		},
		beforeDestroy() {
			// 在页面销毁前清除定时器
			clearInterval(this.setInterval_id);
		},
		onUnload() {
			clearInterval(this.setInterval_id);
		},
		onBackPress(options) {
			//左上角导航栏按钮及安卓返回键
			clearInterval(this.setInterval_id);
		},
		onLoad: function(options) {
			this.c_id = options.card_id;
			this.type = options.type
			setTimeout(() => {
				this.pageLoading = false;
			}, 1000);

			this.card_id = options.card_id
			this.getdata(this.card_id);
			this.to_time();
		},
		onReady() {
			let _this = this;
			_this.openLoading()
			setTimeout(() => {
				uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
					success(res) { //成功回调函数
						console.log(res)
						let wHeight = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
						let wWidth = res.windowWidth
						let if_big = wHeight - wWidth
						if (if_big < 500 && wHeight > 1000) {
							wHeight += (wHeight - wWidth) / 1.5
						}
						let titleH = uni.createSelectorQuery().in(_this).select(
							"#main_view"); //想要获取高度的元素名（class/id）

						_this.warpHeight = wHeight
						console.log(wHeight, _this.mainBodyTop)
						titleH.boundingClientRect(data => {
							console.log(data.top)
							console.log(wHeight)
							_this.mainBodyHeight = wHeight - data
								.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
						}).exec()
						console.log(_this.mainBodyHeight)
					}
				})
			})
		},
		methods: {
			// 春节物供券开始结束时间
			to_time() {
				var self = this
				var startDateTime = new Date("2025/04/27 00:00:00"); // 设置开始日期和时间
				// var endDateTime = new Date("2025/03/30 23:59:59"); // 设置结束日期和时间

				var now = new Date(); // 获取当前日期和时间

				// console.log('self.user.lg_id: ', self.user.lg_id);
				//  && now <= endDateTime
				if (now >= startDateTime) {
					self.whether = 1
				} else {
					self.whether = 0
				}
			},
			// 修改签名
			amend_sign() {
				uni.navigateTo({
					url: '/pages/signature/f-signature'
				})
			},
			openLoading: function() {
				this.$refs.guipageloading.open();
				// 延迟2秒关闭
				setTimeout(() => {
					this.$refs.guipageloading.close();
				}, 1000);
			},
			//01 居中弹出
			open1: function() {
				this.openLoading()
				clearInterval(this.setInterval_id);
				setTimeout(this.show_ewm);
			},
			close1: function() {
				// this.$refs.guipopup1.close();
				clearInterval(this.setInterval_id);
			},
			onUnload() {
				console.log('---1---')
				clearInterval(this.setInterval_id);
			},
			getdata(card_id) {
				let self = this;
				// self.$refs.guipageloading.open();

				self.$boya.NPost("/app/card_bag/info", {
					id: card_id
				}, function(res) {
					console.log('111111', res);
					if (res.data.wallet_type.qrcode_head) {
						// self.qrcodeContent = res.data.wallet_type.qrcode_head + "-" + res.data.uuid;
						self.qrcodeContent = res.data.ewm;
						// console.log('qrcode1: ', self.qrcodeContent);
					} else {
						self.qrcodeContent = "https://jf.boyaltd.cn/api/card?id=" + res.data.uuid;
					}
					// console.log('时间：', res.data);
					self.wallet_type = res.data.wallet_type;

					if (res.data.title.includes('·') == true) {
						self.title = res.data.title
					} else {
						self.title = res.data.title;
					}

					self.balance = res.data.money;

					self.start_time = res.data.start_time;
					console.log('开始时间：', self.start_time);
					self.expiry_time = res.data.expiry_time;
					console.log('结束时间：', self.expiry_time);

					if (res.data.type == "2023年女职工保健卡") {
						self.title = '2023年女职工保健卡';
						self.class_bg = "n_bg";
						self.input_money = false;
						self.ns_if = true;
						self.open1()
						self.imageURL =
							'https://boyaltd.oss-cn-hangzhou.aliyuncs.com/%E5%A5%B3%E5%B7%A5%E8%83%8C%E6%99%AF%E5%B8%A6%E5%AD%97.png'
						// self.show_ewm();
						if (self.qrcodeContent.charAt(0) == "F") {
							self.whatF = 1
						} else {
							self.whatF = 0
						}
						console.log('self.whatF1: ', self.whatF);
					} else {
						self.open1()
						console.log('背景: ', res.data.wallet_type.info_img);
						if (!res.data.wallet_type.info_img) {
							self.imageURL =
								'https://boyaltd.oss-cn-hangzhou.aliyuncs.com/resize.png'
						} else {
							self.imageURL = res.data.wallet_type.info_img
						}

						if (self.qrcodeContent.charAt(0) == "F") {
							self.whatF = 1
						} else {
							self.whatF = 0
						}
						console.log('self.whatF2: ', self.whatF);
					}
				})
			},
			// 检查扫码
			inspect() {
				if (this.is_cache) {
					console.log(this.is_cache, 'is_cache');
					let self = this;
					
					//self.$boya.NPost("/app/card_bag/jc_ewm_cache", {
					self.$boya.NPost("/app/card_bag/check_qrcode_inspect", {
						data: this.qrcodeContent,
						type: this.wallet_type.name
					}, function(res) {
						console.log('shuju:', res);
						if (res.data==1) {
							
								//模态框提示
								uni.showToast({
									title: "已核销",
									icon: 'none',
									duration: 3000
								});
								self.is_cache = false;
								// console.log(self.setInterval_id);
								clearInterval(self.setInterval_id); //删除定时器
							
						}
						
					}, false, false)
				}
			},
			show_ewm() {
				let self = this;
				let token = uni.getStorageSync("token");

				let text = this.qrcodeContent + '-' + this.money;
				if (this.wallet_type.qrcode) {
					text = this.qrcodeContent;
				}
				// console.log(text,'texxxxx');
				this.qrcode = new QRCode(this.qrcodeId, {
					text: text,
					width: uni.upx2px(this.qrcodeSize),
					height: uni.upx2px(this.qrcodeSize),
					colorDark: this.qrcodeColor,
					colorLight: this.qrcodeBgColor,
					correctLevel: QRCode.CorrectLevel.H
				});

				//保存缓存
				self.$boya.NPost("/app/card_bag/ewm_cache", {
					data: text,
					id: self.card_id,
					// type: self.wallet_type.name,
					token: token,
				}, function(res) {
					// uni.showToast({
					// 	title: "刷新成功",
					// 	icon: 'none',
					// 	duration: 1000
					// });
					//uni.showToast({title:res.msg, icon:"none"});
					console.log(res, 'res');
					self.is_cache = true;
					self.qrcode_showtext = true;
					if (res.data != '') {
						self.qrcodeContent = res.data;
					}
					console.log("qrcode2", self.qrcodeContent);
					console.log('qrcode_showtext: ', self.qrcode_showtext);

					if (self.wallet_type.qrcode) {
						text = self.qrcodeContent;
					}
					self.qrcode = new QRCode(self.qrcodeId, {
						text: text,
						width: uni.upx2px(self.qrcodeSize),
						height: uni.upx2px(self.qrcodeSize),
						colorDark: self.qrcodeColor,
						colorLight: self.qrcodeBgColor,
						correctLevel: QRCode.CorrectLevel.H
					});

					// self.inspect()
					// if (self.title == '2023年女职工保健卡') {

					// } else {
					self.setInterval_id = setInterval(self.inspect, 3000); //检查二维码缓存
					// }
					console.log(self.setInterval_id, 'iddddd');
				});
			},

			saveQrcode: function() {
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: uni.upx2px(this.qrcodeSize),
					height: uni.upx2px(this.qrcodeSize),
					destWidth: uni.upx2px(this.qrcodeSize),
					destHeight: uni.upx2px(this.qrcodeSize),
					canvasId: this.qrcodeId,
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							fail: function(e) {
								console.log(e);
							},
							success: () => {
								uni.showToast({
									title: "图片已经保存到您的相册~"
								})
							}
						});
					}
				});
			},
			to_jieshao() {
				uni.navigateTo({
					url: "../women/video"
				})
			},
			to_xuzhi() {
				uni.navigateTo({
					url: "../women/introduce"
				})
			}
		}
	}
</script>
<style>
	page {
		height: 100%;
	}

	.mianScrollView {
		position: absolute;
		left: 0;
		z-index: 2;
		width: 750rpx;
		padding: 35rpx;
		border-radius: 50rpx 50rpx 0 0;
		/* background-color: rgba(255, 255, 255, 0.95); */
		background-color: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(3px);
		top: 350rpx
	}

	.funcbt {
		border-radius: 20rpx; //设置倒角
		line-height: 80rpx; //内容的高度
		box-shadow: 3rpx 2rpx 2rpx 2rpx gray;
	}

	.btn_class {
		width: 40%;
		height: 60rpx;
		margin: 30rpx auto;
	}

	.n_bg {
		background-image: url(https://boyaltd.oss-cn-hangzhou.aliyuncs.com/%E5%A5%B3%E5%B7%A5%E8%83%8C%E6%99%AF%E5%B8%A6%E5%AD%97.png);
		background-size: 100% 100%;
		padding-bottom: 60rpx
	}

	.q_bg {
		background-image: url(https://boyaltd.oss-cn-hangzhou.aliyuncs.com/20211229_61cc214fdb07a.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100%;
		/* padding-bottom: -300rpx; */
	}

	.view-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #fff;
	}

	.icon {
		width: 7vw;
		height: 7vw;
	}

	.title {
		margin-top: 10rpx;
		font-size: 20upx;
		/* color: #8f8f94; */
	}

	.box {
		width: 100%;
		/* padding: 0 3%; */
		height: 120rpx;
		/* background-color: #f5f5f5; */
		/* border-radius: 10rpx; */
		/*  阴影 */
		/* box-shadow: 0px -10px 10px gray; */
		/* 	margin: 40upx 2% 0upx 2%; */
		/* margin-bottom: 0 2% 2% 2%; */
		/* 		margin-left: 2%;
	
		
		/* margin-top: 5%; */
		/* margin-bottom: 10%; */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.demo {
		width: 100%;
		margin: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 10%;
	}

	.button {
		width: 90rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 8rpx;
		margin: 10rpx;
	}

	.button-text {
		font-size: 38rpx;
		text-align: center;
	}

	.button3 {
		width: 50%;
		height: 90rpx;
		background-color: #2e82ff;
		color: #ffffff;
		text-align: center;
		border-radius: 10rpx;
	}

	.button3::before {
		content: "";
		position: absolute;
		left: 0px;
		width: 100%;
		height: 100%;
		background-image:
			linear-gradient(to right, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 70%);
		background-size: 200%;
		animation: wipes 1s infinite;
	}

	@keyframes wipes {
		0% {
			background-position: 0 0;
		}

		100% {
			background-position: 100% 0;
		}
	}
</style>